<div style="mergin:5px;padding:5px;color:#000;">
<!--
<link id="jquery-ui-theme" href="assets/vendor/jquery-ui/themes/hotsneaks/jquery-ui.theme.min.css" rel="stylesheet">
-->
<style type="text/css">
  .left_label {
      display:inline-block;
      width: 50%;
  }
  .right_val {
      display:inline-block;
      width: 40%;
  }
</style>

<style>
fieldset {
  /*background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.6);*/
  border-style: solid;
  border-width: 2px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  padding: 2px 10px;
  margin-bottom: 2px;
  width:360px;
  font-size:0.8em;
}

fieldset legend {
  color: #302A2A;
  font: bold 16px/2 Verdana, Geneva, sans-serif;
  font-weight: bold;
  text-align: left;
  text-shadow: 2px 2px 2px rgb(88, 126, 156);
}
</style>

<fieldset>
<legend>Theme Options</legend>
<style>
.chklabel {
  padding-top:2px;
  width:300px;
  display: inline-block;
}
</style>
<div>
<span class="chklabel">Explorer Dark Theme(>v1809)</span>
<div class="onoffswitch" style="float:right;">
    <input type="checkbox" name="system.darktheme" class="onoffswitch-checkbox opt_item" id="system.darktheme">
    <label class="onoffswitch-label" for="system.darktheme">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>
</div>

<div>
<style>
#colors_panel input[type="radio"] + label {
    border: 2px solid transparent;
    display: block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    vertical-align: middle;
    color: black;
    font-size:.6em;
    margin-left: 3px;
    margin-top: -15px;
    cursor: pointer;
}

#colors_panel input[type="radio"]:hover + label {
    border: 2px solid black;
}

#colors_panel input[type="radio"]:checked + label {
    border: 2px solid black;
}

</style>
<span class="chklabel">Windows Title Bars Color:</span>
<div id="colors_panel" style="float:left;">
</div>
</div>

</fieldset>

<br/>
<div style="margin:3px;font-size:.8em;">
    <label><input type="checkbox" name="tweak.shortcut.noarrow" class="opt_item">Remove Shortcut Arrows from Shortcut icons</label>
</div>
<div style="margin:3px;font-size:.8em;">
    <label><input type="checkbox" name="tweak.shortcut.nosuffix" class="opt_item" checked>Remove "Shortcut" suffix for new Shortcuts</label>
</div>


</div>

<script>
(function() {
    if (!$patch_loaded) {
        draw_colors_panel();
        //$patches_opt["theme.title_color"] = "1";
    }
    $(':radio[id^=bt-]').checkboxradio();
})();


function draw_colors_panel() {
    var colors_pool = ['#FFFFFF', '#FFFFFF', '#FFB900', '#F7630C', '#EF6950', '#E81123', '#B146C2', '#9A0089',
                       '#0078D7', '#0063B1', '#038387', '#00CC6A', '#107C10', '#567C73', '#5D5A58', '#847545'];
    var count = 0;
    var html = '<table>';
    for(i=0;i<2;i++) {
      html+= "<tr>";
      for(j=0;j<8;j++) {
       html+= '<td align="center"><input type="radio" id="color_radio_' + count + '" name="theme.title_color" class="opt_item" value="'
           + count + '" style="opacity:0" />'
           + '<label for="color_radio_' + count + '" style="background:' + colors_pool[count] + '"/></td>';
       count++;
      }
      html+= "</tr>";
     }
    html+= '</table>';
    $('#colors_panel').html(html);
    $('#colors_panel label').eq(0).html('None');
    $('#colors_panel label').eq(1).html('Auto');
}
</script>